<template>
    <div>
        <el-checkbox-group v-model="value" :disabled="disabled" :style="domCss" @change="Change('change')" v-if="controlType === 'add'">
            <el-checkbox v-for="(el,index) in options" :key="index" :label="el[defaultProps.value]">{{el[defaultProps.label]}}</el-checkbox>
        </el-checkbox-group>
        <Txt v-else :defaultValue="seeValue" />
    </div>
</template>

<script>
import Txt from './txt'
export default {
    components: {Txt},
    props: {
        showAllLevels: {
            type: Boolean,
            default: false
        },
        options: {
            type: Array,
            default: () => []
        },
        defaultProps: {
            type: Object,
            default: () => {return {
                label: 'label',
                value: 'value',
                children: 'children'
            }}
        },
        label: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        domCss: {
            type: String,
            default: 'font-size: 0;line-height: 32px;'
        },
        defaultValue: '',
        controlType: {
            type: String,
            default: 'add'
        }
    },
    data() {
        return {
            value:[],
        }
    },
    computed: {
        seeValue() {
            console.log(this.value.map(item => this.options.find(_item => _item[this.defaultProps.value] === item)))
            return this.value.map(item => this.options.find(_item => _item[this.defaultProps.value] === item)).map(item => item[this.defaultProps.label]).join(',')
        }
    },
    watch: {
        defaultValue: {
            deep: true,
            immediate: true,
            handler: function(v) {
                this.value = v ? (!(v instanceof Array) ? v.split(',') : v) : []
            }
        }
    },
    methods: {
        Change(type) {
            console.log(this.value)
            this.$emit('EventHandler',type, this.$attrs.prop,this.value ? this.value.join(',') : '');
        }
    }
}
</script>

<style lang="scss" scoped>

</style>